<script setup>
import { EditPen, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
import useChatListStore from '@/stores/chatList';
import { CODE } from '@/api/constants';
import { INVALID_CHAT_ID } from '@/stores/chatList';

const chatListStore = useChatListStore()

onMounted(()=>{
    chatListStore.registerOnList((resp)=>{
        if (resp.code != CODE.OK)
        ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 3000
        })
    })
})

onUnmounted(()=>{
    chatListStore.unregisterOnList()
})

const handleDelete = (item) => {
    ElMessageBox.confirm(
        `将删除聊天记录："${item.name}"，确定继续？`,
        'Warning',
        {
            confirmButtonText: '删除',
            confirmButtonClass: 'el-button--danger',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        chatListStore.deleteDialog(item.id)
    }).catch(()=>{
        // 不处理取消逻辑
    })
}

// 新建聊天命名弹框及重命名弹框
const chatForm = reactive({
    id: INVALID_CHAT_ID,
    name: "",
    isCreate: true,
})
const showNameDia = ref(false)
const isNameOkDisable = computed(() => {
    return chatForm.name.trim() === ""
})
const openNameDialog = (id, name, isCreate) => {
    chatForm.id = id
    chatForm.name = name
    chatForm.isCreate = isCreate
    showNameDia.value = true
}
const nameOkBtnFunc = async () => {
    if (chatForm.isCreate) {
        chatListStore.createDialog(chatForm.name)
    } else {
        chatListStore.renameDialog(chatForm.id, chatForm.name)
    }
    showNameDia.value = false
}

// 重命名聊天记录名称
const handleCommand = (item, cmd) => {
    openNameDialog(item, `${item}`, false)
}
</script>

<template>
<div class="chat-container">
    <el-button type="primary" @click="openNameDialog(INVALID_CHAT_ID, '', true)" size="large" :icon="Plus"
        :disabled="!chatListStore.canCreatDialog">新建聊天</el-button>
    <div v-if="!chatListStore.canCreatDialog" style="flex: 1; display: flex; justify-content: center; align-items: center;">
        <el-text type="info" truncated>还没有选择助理！</el-text>
    </div>
    <div v-else-if="chatListStore.isEmpty" style="flex: 1; display: flex; justify-content: center; align-items: center;">
        <el-text type="info" truncated>还没有聊天记录！</el-text>
    </div>
    <el-scrollbar v-else style="flex: 1; margin-top: 20px;">
        <el-space direction="vertical" style="width: 100%;" size="large">
            <el-dropdown v-for="item in chatListStore.chatDialogs" :key="item" @command="(cmd)=>handleCommand(item, cmd)" 
                trigger="contextmenu" placement="bottom-end">
                <el-card shadow="hover" style="height: 40px; width: 100%;" :body-style="{ padding: '14px 8px'}"
                    @click="chatListStore.setActiveDia(item)" :class="{'selected-dialog': item.id === chatListStore.activeChatDia?.id}">
                    <el-text truncated>{{ item.name }}</el-text>
                    <el-icon 
                        :size="16" 
                        :color="'var(--el-color-info)'" 
                        :style="{ opacity: 0.3, cursor: 'pointer', transition: 'opacity 0.2s' }"
                        class="x-icon"
                        @mouseover="(e) => e.currentTarget.style.opacity = 1"
                        @mouseout="(e) => e.currentTarget.style.opacity = 0.3"
                        @click.stop="handleDelete(item)">
                        <Close />
                    </el-icon>
                </el-card>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="EditPen" command="rename">重命名</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-space>
    </el-scrollbar>

    <el-dialog v-model="showNameDia" title="聊天记录" width="500">
        <el-form :model="chatForm">
            <el-form-item label="名称" label-width="formLableWidth" required>
                <el-input v-model.trim="chatForm.name" auto-complete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="default" size="default" @click="showNameDia = false">取消</el-button>
            <el-button type="primary" size="default" @click="nameOkBtnFunc" :disabled="isNameOkDisable">确定</el-button>
        </template>
    </el-dialog>
</div>
</template>

<style scoped>
.chat-container {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-container :deep(.el-space__item) {
    width: 100%;
}

.x-icon {
    z-index: 2;
    position: absolute;
    right: 8px;
}

.selected-dialog {
    border: 1px solid #40a9ff;
    box-shadow: #40a9ff;
    order: -1; /* 配合flex布局实现置顶 */
}
</style>